#{meta /}

#{title character.jp/}

#{javascript 'characters/character-edit.js'/}
#{stylesheet 'characters/character-edit.css'/}

#{body}

<div class="container">
	<div class="row">
		<div class="col-lg-10">
			<a href="@{characters.CharacterDetail.index(character.id, refer)}" class=" back-link"><span class="glyphicon glyphicon-arrow-left"></span>返回</a>
		</div>
		<div class="col-lg-2 text-right">
			<button class="btn btn-danger" id="btn-delete-character" #{if !canDelete}disabled#{/if}>删除</button>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<table class="table" id="main-table">
				<tr>
					<th>日式汉字</th>
					<td><div id="editable-character-jp">${character.jp}</div></td>
				</tr>
				<tr>
					<th>中式汉字</th>
					<td><div id="editable-character-cn">${character.cn}</div></td>
				</tr>
				<tr>
					<th>拼音</th>
					<td>
						<div id="editable-character-pinyins" data-editable-value="${character.pinyinsText}">
						#{list items:character.pinyins, as:'pinyin'}
							<li>${pinyin}</li>
						#{/list}
						</div>
					</td>
				</tr>
				<tr>
					<th>读音</th>
					<td>
						<table id="table-syllable" class="table table-bordered">
						#{list items:character.syllables, as:'syllable'}
							<tr data-syllable="${syllable.value}">
								<td><div class="editable-syllable-value">${syllable.value}</div></td>
								<td>
									<div class="editable-syllable" data-editable-value="${syllable.wordsValue}">
										#{list items:syllable.words, as:'word'}
											<li>${word.word}(${word.syllable})</li>
										#{/list}
										#{else}
											（无）
										#{/else}
									</div>
								</td>
								<td>
									<div class="checkbox">
										<label>
											<input type="checkbox" #{if syllable.isMain}checked#{/if} class="editable-syllable-main"> 汉字词
										</label>
									</div>
								</td>
								<td><button class="btn btn-danger btn-sm btn-delete-syllable">删除</button></td>
							</tr>
						#{/list}
							<tr>
								<th colspan="4">
									<div id="div-add-syllable">
										<input type="text" id="input-add-syllable"/>
									</div>
								</th>
							</tr>
						</table>
					</td>
				</tr>
				</tr>
				<tr>
					<th>熟字训</th>
					<td>
						<table id="table-fixwords">
							#{list items:character.fixwords, as:'fixword'}
								<tr>
									<td><div>${fixword.word}(${fixword.syllable})</div></td>
									<td><button 
											class="btn btn-danger btn-sm btn-delete-fixword" 
											data-word="${fixword.word}" 
											data-syllable="${fixword.syllable}"
										>删除</button>
									</td>
								</tr>
							#{/list}
						</table>
						<div id="div-input-fixword">
							<input type="text" id="input-add-fixword"/>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
</div>

#{/body}
